<template>
  <Panel title="修改密码">
    <!-- <span slot="text">添加账号</span> -->

    <div slot="content">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 账号 -->
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
            type="text"
            v-model="ruleForm.oldPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="新密码" prop="newPwd">
          <el-input
            type="password"
            v-model="ruleForm.newPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
       <el-form-item label="确认密码" prop="surePass">
          <el-input
            type="password"
            v-model="ruleForm.surePass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="savePass"
            >确定</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";

import {checkPass} from '@/utils/validate.js'

import { checkoldpwd,pwdEdit } from "@/api/user";
console.log(checkPass);
export default {
  components: {
    Panel,
  },
  data() {

     // 原密码
    var validateOldPwd = async(rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入原密码'));
        } else if (!checkPass(value)) {
            callback(new Error('原密码格式不正确'));
            
        }else{
            let res=await checkoldpwd({oldPwd:value});
            if(res.data.code==200){

            }
            callback();
        }
      };

    // 密码
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (!checkPass(value)) {
            callback(new Error('密码格式不正确'));
            
        }else{
            // 密码和确认密码一致性效验
            // 确认密码不为空时，在重新验证确认密码
            if (this.ruleForm.surePass !== '') {
            this.$refs.ruleForm.validateField('surePass');
          }
            callback();
        }
      };



      // 确认密码
    var validatesurePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('确认密码不能为空'));
        } else {
          if (value!=this.ruleForm.newPwd) {
            callback(new Error('两次输入密码不一致'));
          }
          callback();
        }
      };
   
    return {
        formInline:{},
    //   ruleForm: "",
      ruleForm: {
        oldPwd: "",
        newPwd: "",
        region: "",
      },
      rules: {
        oldPwd: [{require:true, validator: validateOldPwd, trigger: "blur" }],
        newPwd: [{ require:true,validator: validatePass, trigger: "blur" }],
        surePass: [{ require:true,validator: validatesurePass, trigger: "blur" }],
      },
    };
    


  },
  methods: {
    savePass() {
     
        this.$refs['ruleForm'].validate(async(valid) => {
          if (valid) {
           let res=await pwdEdit({newPwd:this.ruleForm.newPwd});

            if(res.data.code==0){
                  // 清空本地存储
                  localStorage.clear()
                  // 跳转到登录页
                  this.$router.push('/login')
            }

          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
}
.clearfix:after {
  clear: both;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 100%;
}
.el-input {
  width: 200px;
}
</style>